<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  src: {
    type: String,
    required: true
  }
})

const svgContent = ref('')

async function loadSvg(path) {
  try {
    const res = await fetch(path)
    if (!res.ok) throw new Error(`HTTP error ${res.status}`)
    svgContent.value = await res.text()
  } catch (err) {
    console.error('Failed to load SVG:', path, err)
    svgContent.value = `<!-- SVG 加载失败: ${path} -->`
  }
}

// 支持动态变化（热更新/响应式 src）
watch(() => props.src, (newSrc) => {
  if (newSrc) loadSvg(newSrc)
}, { immediate: true })
</script>

<template>
  <div v-html="svgContent" style="max-width: 100%; overflow-x: auto;" />
</template>